﻿@using MyBlog2
@model MyBlog2.ViewModels.DetialViewModel
@{
    ViewData["Title"] = "文章详情";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var usr = ViewBag.usr as MyBlog2.Models.User;

    string mdToHtml;
    @using (var reader = new System.IO.StringReader(Model.Article.Contents))
    {
        @using (var writer = new System.IO.StringWriter())
        {
            CommonMark.CommonMarkConverter.Convert(reader, writer);
            mdToHtml = writer.ToString();
        }
    }

}


<div class="cl-cantainer container">
    <div class="row" style="align-items:center">
        <div class="col-md-12 cl-left" style="margin-left:auto;margin-right:auto;">
            <div class="cl-artical-content" style="padding:0 35px 20px 35px;">
                <h2 class="cl-artical-title" style="color:#FF9400;border-bottom:solid;border-bottom-color:rgb(0,181,173);">
                    @Model.Article.Title
                    <span class="badge badge-info" style="font-size:14px;margin-left:20px;">@Model.Article.Flag</span>
                </h2>

                <div class="cl-card-tag">
                    <div>
                        <span>@Model.Article.Views</span>人浏览 / <span>@Model.Comments.Count</span>人评论
                    </div>
                </div>

                <div id="content" style="display:none;">
                    @mdToHtml
                </div>
                <div id="article-content" class="typo cl-artical" style="padding-top:20px;">
                    @* 实际内容区 *@
                </div>
            </div>

            @* 转载申明 *@
            @if (Model.Article.ShareStatement)
            {
                <div class="cl-artical-content" style="margin-left:15px;padding:0 35px 20px 35px;">
                    <div class="row">
                        <div class="alert alert-success" role="alert" style="background-color:#d4edda60;width:100%;margin-right:15px;">
                            <ul>
                                <li>
                                    作者：&nbsp;※听雨※
                                </li>
                                <li>
                                    发表时间：&nbsp;2020年4月27日 22:30:27
                                </li>
                                <li>
                                    版权声明：&nbsp;※听雨※ &nbsp;版权所有
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            }



            @* 评论区 *@
            @if (Model.Article.CommentAbled)
            {
                <div class="cl-artical-content" style="padding:0 35px 20px 35px;">
                    @* 评论展示 *@
                    <div class="ui comments" style="max-width:100% !important;">
                        <h3 class="ui dividing header" style="color:#FF9400;border-bottom:solid;border-bottom-color:rgb(0,181,173);">评论</h3>
                        @if (Model.Comments != null)
                        {
                            @foreach (var comment in Model.Comments)
                            {
                                <div class="comment">
                                    <a class="avatar">
                                        @if (comment.AdminComment)
                                        {
                                            <img src="~/images/admin.jpg">
                                        }
                                        else
                                        {
                                            <img src="~/images/touxiang.jpg">
                                        }

                                    </a>
                                    <div class="content">
                                        <a class="author">
                                            <span>@comment.Nickname</span>
                                            @if (comment.AdminComment)  //博主评论
                                            {
                                                <div class="ui mini basic blue label" style="padding:2px 2.5px;">博主</div>
                                            }
                                        </a>
                                        <div class="metadata">
                                            <span class="date">@comment.AddTime</span>
                                        </div>
                                        <div class="text">
                                            @comment.Contents
                                        </div>
                                        <div class="actions">
                                            <a class="reply" data-commentid="@comment.Id" data-commentnickname="@comment.Nickname" onclick="reply(this)" style="color:#8BC34A;">回复</a>
                                        </div>
                                    </div>

                                    @if (comment.ReplyComments != null)
                                    {
                                        <div class="comments">
                                            @foreach (var reply in comment.ReplyComments)
                                            {
                                                <div class="comment">
                                                    <a class="avatar">
                                                        @if (reply.AdminComment)
                                                        {
                                                            <img src="~/images/admin.jpg">
                                                        }
                                                        else
                                                        {
                                                            <img src="~/images/touxiang.jpg">
                                                        }
                                                    </a>
                                                    <div class="content">
                                                        <a class="author">
                                                            <span>@reply.Nickname</span>
                                                            @if (reply.AdminComment)  //博主评论
                                                            {
                                                                <div class="ui mini basic blue label" style="padding:2px 2.5px;">博主</div>
                                                            }
                                                            &nbsp;<span style="color: #00B5AD !important;">@@ &nbsp;@reply.ParentComment.Nickname</span>
                                                        </a>
                                                        <div class="metadata">
                                                            <span class="date">@reply.AddTime</span>
                                                        </div>
                                                        <div class="text">
                                                            @reply.Contents
                                                        </div>
                                                        <div class="actions">
                                                            <a class="reply" data-commentid="@reply.Id" data-commentnickname="@reply.Nickname" onclick="reply(this)" style="color:#8BC34A;">回复</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            }
                                        </div>

                                    }
                                </div>
                            }
                        }

                        @* 评论提交 *@
                        <form class="ui reply form">
                            <input type="hidden" id="ArticleId" value="@Model.Article.Id" />
                            <input type="hidden" name="ParentComment.Id" />
                            <div class="field">

                                <textarea id="Contents"></textarea>
                            </div>
                            <div class="fields">
                                <div class="field m-mobile-wide m-margin-bottom-small">
                                    <div class="ui left icon input">
                                        <i class="ui user icon"></i>
                                        @if (usr != null)
                                        {
                                            <input type="text" id="Nickname" value="@usr.Nickname" placeholder="昵称" />
                                        }
                                        else
                                        {
                                            <input type="text" id="Nickname" placeholder="昵称" />
                                        }
                                    </div>

                                </div>
                                <div class="field m-mobile-wide m-margin-bottom-small">
                                    <div class="ui left icon input">
                                        <i class="ui mail icon"></i>
                                        @if (usr != null)
                                        {
                                            <input type="email" id="Email" value="@usr.Email" placeholder="邮箱" />
                                        }
                                        else
                                        {
                                            <input type="email" id="Email" placeholder="邮箱" />
                                        }
                                    </div>
                                </div>
                                <div class="field m-mobile-wide m-margin-bottom-small">
                                    <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            }

        </div>

    </div>
</div>
<script src="~/js/prism.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<link href="~/css/typo.css" rel="stylesheet" />
<script type="text/javascript">
    var htmlcontent = $("#content").text();
    $("#article-content").html(htmlcontent);//添加到div中显示出来
    $("#content").remove();   //移除
</script>

<script>
    //提交评论
    $("#commentpost-btn").click(function () {
        if ($("#ArticleId").val() == "") {
            return;
        }
        if ($("#Nickname").val() == "") {
            alert("请填写昵称！");
            return;
        }
        if ($("#Email").val() == "") {
            alert("请填写邮箱！");
            return;
        }
        if ($("#Contents").val() == "") {
            alert("请填写评论内容！");
            return;
        }
        $.ajax({
            type: 'post',
            url: "/Comment/CommentPost",
            data: {
                "ParentComment.Id": $("[name='ParentComment.Id']").val(),
                "ArticleId": $("#ArticleId").val(),
                "Nickname": $("#Nickname").val(),
                "Email": $("#Email").val(),
                "Contents": $("#Contents").val()
            },
            success: function (data) {
                location.reload();
            },
        });
    });


    //回复方法
    function reply(obj) {
        var commentid = $(obj).data("commentid");
        var commentNickname = $(obj).data("commentnickname");
        $("#Contents").attr("placeholder", "@@" + commentNickname).focus();
        $("[name='ParentComment.Id']").val(commentid);
        //var pid = $("[name='ParentComment.Id']").val();
    }
</script>